<template>
  <div v-if="item.children">
    <el-menu  background-color="#304156" text-color="#fff" >
    <template v-if="item.children.length == 0">
        <router-link :to='item.path'>
            <el-menu-item :index="item.path">
            <i :class="'fa fa-margin '+item.icon"></i>
            <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </router-link>
    </template>

    <el-submenu v-else :index="item.path" >
      <template slot="title" >
        <i :class="'fa fa-margin '+item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </template>

      <template v-for="child in item.children">
        <MenubarItem
          v-if="child.children&&child.children.length>0"
          :item="child"
          :key="child.path"/>
        <template v-else >
          <router-link :to='child.path' :key="child.path">
            <el-menu-item :index="child.path">
                <span slot="title">{{child.name}}</span>
            </el-menu-item>
          </router-link>
        </template>
        
      </template>
    </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'MenubarItem',
  data () {
    return {
      openArry: []
    }
  },
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  mounted () {
    for (const key in this.item) {
      if (this.item.children.length) {
        this.openArry.push(this.item.path)
      }
    }  
  }
}
</script>


<style lang="less">
.el-menu{
  border: 0;
}
.el-submenu .el-menu-item{
  min-width: auto;
}
.el-submenu__title i{
  margin-right: 6px;
}
a{
  text-decoration: none;
}
</style>
